import { BaseUIPagination } from '@lingma/base-ui__pagination'
import { Card, Space, Typography } from 'antd'
import { useState } from 'react'

const { Title, Paragraph, Text } = Typography

export const PaginationDemo = () => {
  const [page, setPage] = useState(1)
  const [size, setSize] = useState(10)

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      <Title level={2}>BaseUIPagination 组件示例</Title>

      <Card title="基础分页" variant="borderless">
        <Space direction="vertical" style={{ width: '100%' }}>
          <Paragraph>
            该组件保留 antd Pagination 的全部功能，并提供局部主题与越界保护。下面为受控模式示例：
          </Paragraph>
          <BaseUIPagination
            total={240}
            current={page}
            pageSize={size}
            showSizeChanger
            showQuickJumper
            onChange={(p, s) => {
              setPage(p)
              setSize(s || size)
              console.log('分页变化:', p, s)
            }}
          />
          <Text type="secondary">
            当前页: {page}, 每页: {size}, 总数: 240
          </Text>
        </Space>
      </Card>
    </Space>
  )
}
